<template>
	<div>
		<el-dialog :visible.sync="dialogVisible" :show-close="false">
			<div slot="title"
				style="border-bottom: 1px solid #cbcbcb;display: flex;align-items: center;justify-content: space-between;padding-bottom: 15px;">
				<div style="font-size: 18px;color: #333;">{{name}}</div>
				<i class="el-icon-close" style="cursor: pointer;" @click="close()"></i>
			</div>

			<div v-loading="loading" style="background-color: #fff;">
				<div
					style="display: flex;align-items: center;justify-content: space-between;padding-bottom: 15px;border-bottom: 1px solid #ccc;">
					<div style="font-size: 20px;" class="mobileFontSize14">
						<span style="color: #2468f2;margin-right: 2px;">{{total}}</span>
						<span>条评论</span>
					</div>
						
					<div style="font-size: 20px;cursor: pointer;" @click="handleSort"
						class="mobileFontSize14">
						<span style="margin-right: 5px;">评论排序</span>
						<img v-if="sort" style="width: 10px;height: 14px;"
							src="@/assets/images/industryNews13.png" >
						<img v-else style="width: 10px;height: 14px;"
							src="@/assets/images/industryNews14.png" >
					</div>
				</div>
						
				<div v-for="(item, index) in listData"
					style="padding: 30px 8px 15px 0;margin-left: 15px;border-bottom: 1px dashed #ccc;">
					<div style="display: flex;align-items: center;justify-content: space-between;">
						<div style="display: flex;align-items: center;">
							<img v-if="!item.commentHead || item.commentHead.length==0" style="width: 50px;height: 50px;margin-right: 15px;object-fit:cover"
								src="@/assets/images/industryNews15.png" >
							<img v-else style="width: 50px;height: 50px;margin-right: 15px;object-fit:cover;border-radius: 50px;"
								:src="item.commentHead" >
							<img v-if="item.userDto&&item.userDto.staffType&&item.userDto.staffType=='17'" style="position: absolute;bottom: 0;left: 40px;width: 15px;height: 15px;"
								src="@/assets/images/industryNews48.png">
							<span style="font-size: 20px;font-weight: 600;color: #333;" class="mobileFontSize14">{{item.commentName}}</span>
						</div>
						<div>
							<i v-if="userInfo.id==item.createBy" class="el-icon-delete" style="cursor: pointer;" @click="handleDeleteComment(item.id)"></i>
						</div>
					</div>
					
						
					<div style="font-size: 20px;color: #555;line-height: 35px;margin-top: 12px;" class="mobileFontSize14">{{item.commentContent}}</div>
						
					<div style="font-size: 18px;color: #999;" class="mobileFontSize14">
						<span>{{item.createTime}}</span>
						<span style="margin-left: 15px;">IP属地：{{item.place}} </span>
					</div>
				</div>
						
				<div style="text-align: center;margin-top: 40px;">
					<el-pagination background layout="prev, pager, next" :total="total"
						:page-size="10" :pager-count="5" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</div>

		</el-dialog>
	</div>
</template>

<script>
	import {
		industryNewCommentList
	} from "@/request/api/industryNew";
	export default {
		data() {
			return {
				dialogVisible: false,
				loading: false,
				listData: [],
				
				sort: true,
				page:1,
				total:0,
			};
		},
		methods: {
			open(id,name) {
				if (window.sessionStorage.getItem("userInfo") !== null) {
				  this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
				}
				this.id = id
				this.name = name
				this.dialogVisible = true
				this.getList()
			},
			getList(){
				let params = {
					informationId: this.id,
					page:this.page,
					pageSize:10,
					ordered:this.sort==true?'asc':''
				}
				this.loading = true
				industryNewCommentList(params).then(res => {
				    if (res.data.code === 200) {
						this.loading = false
				        this.listData = res.data.result.items
				        this.total = res.data.result.total
				    }
				}).catch((err)=>{
					this.loading = false
					console.log('err',err);
				})
			},
			// 点击分页
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			},
			// 排序
			handleSort(){
				this.sort = !this.sort
				this.getList()
			},
			// 删除评论
			handleDeleteComment(id){
				this.$confirm('确定删除此评论吗？', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  industryNewCommentDelete(id).then((res) => {
				  	// console.log('res',res)
				  	if (res.data.code == 200) {
						this.$message({
							message: res.data.message,
							type: "success",
						});
						setTimeout(()=>{
							this.getList()
						},1000)
				  	} else {
				  		this.$message({
				  			message: res.data.message,
				  			type: "warning",
				  		});
				  	}
				  }).catch((err) => {
				  	console.log('err', err)
				  })
				}).catch(() => {});
			},
			// 关闭
			close() {
				this.dialogVisible = false
			},
			
		}
	}
</script>

<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		/deep/.el-dialog {
			width: 95%;
		}
	}

	.form-label {
		margin-top: 10px;
		text-align: right;
		padding-right: 15px;
	}
</style>